<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        .box {
            width: 500px;
            height: 500px;
            margin: auto;
            background-color: #eee;
        }
        .top {
            width: 500px;
            height: 400px;
            margin: auto;
            background-color: #eee;
        }
        .bottom {
            width: 500px;
            height: 80px;
            margin: auto;
            background-color: #ddd;
            padding-top: 20px;
        }
        #confirms {
            float: right;
            width: 70px;
            height: 40px;
            text-align: center;
            background-color: skyblue;
            color: #fff;
            line-height: 40px;
            margin-right: 20px;
        }
        #close {
            margin-left: 20px;
            margin-right: 20px;
        }
        #title{
            line-height: 50px;
            text-align: center;
        }
        #font {
            width: 500px;
            height: 350px;
            position: relative;
            background-color: antiquewhite;
        }
        #font span {
            width: 30px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            background-color: #ddd;
            border-radius: 50%;
            position: absolute;
        }
        .active {
            background-color: #f00 !important;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="top">
            <img src="" alt="">
            <div id="title"></div>
            <div id="font"></div>
        </div>
        <div class="bottom">
            <span id="close">x</span>
            <span id="refresh">刷新</span>
            <span id="confirms">确认</span>
        </div>
    </div>

    <script>

        var fontArr = [
            '你好' , 
            '我好' ,
            '四通八达',
            '五福临门撒',
            '哦哈哟'
        ];
        var inner = '' ;
        var clickStr = '' ;

        init();
        
        confirms.onclick = function() {
            // console.log(1)
            if(inner === clickStr){
                console.log('ok') ;
            } else {
                console.log('err') ;
                refresh.onclick();
            }
        }



        refresh.onclick = function() {
            font.innerHTML = '';
            init();
        }

        // 初始化
        function init() {
            inner = fontArr[rand(0,fontArr.length)] ;
            title.innerHTML = '顺序输出：' + inner;

            for(var i in inner) {
                var oSpan = document.createElement('span') ;
                oSpan.innerHTML = inner[i];
                var x = rand(0 , 400) ;
                var y = rand(0 , 300);
                oSpan.style.left = x + 'px';
                oSpan.style.top = y + 'px';
                font.appendChild(oSpan) ;
            }


            var oSpans = font.querySelectorAll('span') ;
            console.log(oSpans)

            for(var i = 0 ; i < oSpans.length ; i++) {
                oSpans[i].onclick = function() {
                    this.classList.add('active');
                    clickStr += this.innerHTML;
                }
            }
            
        }


        function randColor() {
            var r = rand(0,256) ;
            var g = rand(0,256) ;
            var b = rand(0,256) ;
            return `rgb(${r},${g},${b})`
        }

        function rand(min , max) {
            return parseInt(Math.random() * (max - min) + min)
        }

    </script>
    
</body>
</html>